<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <!--
        dom(Document Object Model):文档对象模型，代表整个网页的文档
        将标记语言的各个组成部分封装成为对应的对象
        Document:整个文档对象
        Element:元素对象
        Attribute:属性对象
        Text:文本对象
        Comment:注释对象

        dom是window对象的一个属性
    -->
    <style>
        div {
            border: 1px solid orangered;
        }

        .formItem {
            background-color: orange;
        }
    </style>
</head>
<body>
<div>
    用户名:<input type="text" name="username" class="formItem"> <br>
    密码:<input type="text" name="password" class="formItem"> <br>
    <input type="button" value="点我！">
</div>
<div id="div2">
    我是第二个div
</div>
<div id="div3">
    我是第三个div
</div>
</body>
</html>
<!--做dom操作，请将js代码放到网页末端-->
<script>
    //获取dom对象
    //window.document  window可以省略
    console.log(document);

    //获取dom对象
    let elementById = document.getElementById("div2");
    console.log(elementById);

    let divs = document.getElementsByTagName("div");
    console.log(divs);//这是div数组
    console.log(divs[1]);//这是div数组中的第二个元素

    let names = document.getElementsByName("username");
    console.log(names);//names是name=username的控件数组
    console.log(names[0]);

    let formItems = document.getElementsByClassName("formItem");
    console.log(formItems);//formItems是class=formItem的控件数组
    console.log(formItems[1]);

    //使用dom对象获得元素后修改元素内容
    //更改div中的普通文本
    elementById.innerText = "<font color='yellow'>Hello World 1</font>";//会直接当成文本显示在网页中
    //更改div中的HTML代码
    let elementById1 = document.getElementById("div3");
    elementById1.innerHTML = "<font color='#00bfff'>Hello World 2</font>";//会识别成html代码,显示对应的效果

    //修改用户名文本框的值
    names[0].value = "设置了一个默认值"

    //改样式
    // elementById.style.backgroundColor = "#a9a9a9";//使用css
    elementById.style = "background-color:#a9a9a9";//不使用css,直接修改style字符串的值
</script>
